<script setup lang="ts">
import {reactive,ref} from "vue";
import dayjs from 'dayjs';
import type {DateDataType} from "./index.d"
import {useSettingStore} from "@/stores/index"

const dateData = reactive<DateDataType>({
  dateDay: "",
  dateYear: "",
  dateWeek: "",
  timing: null
});

const {setSettingShow} = useSettingStore()
const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
const timeFn = () => {
  dateData.timing = setInterval(() => {
    dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
    dateData.dateWeek = weekday[dayjs().day()];
  }, 1000);
};
timeFn()
const props = withDefaults(
    defineProps<{
      // 标题
      title: number | string;
    }>(),
    {
      title: "",
    }
);

import {getBigScreenTitle} from "@/api";
import {ElMessage} from "element-plus";
const title = ref("");
getBigScreenTitle().then((res) => {
  console.log("左上--设备总览", res);
  if (res.code) {
    for (let item of res.data) {
      const value = JSON.parse(item.statisticalValue);
      switch (item.type) {
        case "title":
          title.value = value.data;
          break;
      }
    }

  } else {
    ElMessage.error(res.msg)
  }
}).catch(err => {
  ElMessage.error(err)
});
</script>

<template>
  <div class="icon_wrap">
    <div class="d-flex jc-between px-2">
      <div class="d-flex aside-width">
        <div class="react-left ml-4 react-l-s">
          <span class="react-left"></span>
          <span class="text"></span>
        </div>
        <!--        <div class="react-left ml-3">-->
        <!--          <span class="text">数据分析2</span>-->
        <!--        </div>-->
      </div>

      <div class="d-flex aside-width">
        <div class="react-right bg-color-blue mr-3">
          <span class="text fw-b">
            {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="d-flex jc-center title_wrap">
    <div class="guang"></div>
    <dv-decoration-10 class="dv-dec-10"/>
    <dv-decoration-10 class="dv-dec-10-s"/>
    <dv-decoration-10 class="dv-dec-10-l"/>
    <dv-decoration-10 class="dv-dec-10-r"/>

    <div class="d-flex jc-center px-2">
      <div class="title">
        <dv-decoration-6
            class="dv-dec-6"
            :reverse="true"
            :color="['#50e3c2', '#67a1e5']"
        />
        <span class="title-text">{{ title }}</span>
      </div>
    </div>
    <div class="timers">

      <div class="setting_icon" @click="setSettingShow(true)">
        <img src="@/assets/img/headers/setting.png" alt="设置">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '../assets/css/index.scss';

.title_wrap {
  height: 60px;
  background-image: url("../assets/img/top.png");
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-bottom: 4px;

  .guang {
    position: absolute;
    bottom: -26px;
    background-image: url("../assets/img/guang.png");
    background-position: 80px center;
    width: 100%;
    height: 56px;
  }

  .dv-dec-10,
  .dv-dec-10-s {
    position: absolute;
    width: 100%;
    height: 5px;
  }

  .dv-dec-10-l,
  .dv-dec-10-r {
    position: absolute;
    width: 55%;
    height: 5px;
  }

  .dv-dec-10 {
    left: 0;
  }

  .dv-dec-10-s {
    right: 0;
    bottom: -990px;
    transform: rotate(180deg);
    transform: rotateY(180deg);
  }

  .dv-dec-10-l {
    top: 524px;
    right: -525px;
    transform: rotateY(90deg);
    transform: rotate(90deg);

  }
  .dv-dec-10-r {
    top: 524px;
    left: -525px;
    transform: rotateY(270deg);
    transform: rotate(270deg);

  }


  .timers {
    position: absolute;
    right: 0;
    top: 30px;
    font-size: 18px;
    display: flex;
    align-items: center;

    .setting_icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-left: 12px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }


}

.title {
  position: relative;
  text-align: center;
  background-size: cover;
  color: transparent;
  height: 60px;
  line-height: 46px;

  .title-text {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 16px;
    width: 100%;
    background: linear-gradient(
            92deg,
            #00bbff 0%,
            #362ffa 20%,
            #9289ff 40%,
            #ffffff 48.8525390625%,
            #01c4ff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .dv-dec-6 {
    position: absolute;
    bottom: -30px;
    left: 50%;
    width: 500px;
    height: 15px;
    transform: translate(-50%);
  }
}

.icon_wrap {
  position: absolute;
  top: 25px;
  width: 100%;
  // 第二行
  .aside-width {
    width: 25%;
  }

  .react-r-s,
  .react-l-s {
    background-color: #0f1325;
  }

  .react-right {
    &.react-l-s {
      text-align: right;
      width: 500px;
    }

    font-size: 18px;
    width: 400px;
    line-height: 50px;
    text-align: center;
    transform: skewX(-45deg);

    .react-after {
      position: absolute;
      right: -25px;
      top: 0;
      height: 50px;
      width: 50px;
      background-color: #0f1325;
      transform: skewX(45deg);
    }

    .text {
      display: inline-block;
      transform: skewX(45deg);
    }
  }

  .react-left {
    &.react-l-s {
      width: 500px;
      text-align: left;
    }

    font-size: 18px;
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    transform: skewX(45deg);
    background-color: #0f1325;

    .react-left {
      position: absolute;
      left: -25px;
      top: 0;
      height: 50px;
      width: 50px;
      background-color: #0f1325;
      transform: skewX(-45deg);
    }

    .text {
      display: inline-block;
      font-weight: bolder;
      font-size: 26px;
      transform: skewX(-45deg);
    }
  }
}
</style>
